<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <treetools :nodedata="company" :is-root="true" @add="addDepartment" />
        <hr>
        <el-tree
          :data="depts"
          default-expand-all
          :expand-on-click-node="false"
        >
          <template #default="obj">
            <!-- 用了一个行列布局 -->
            <!-- <treetools :nodedata="obj.data" /> -->
            <treetools :nodedata="obj.data" @del="getDepartments" @add="addDepartment" @edit="editDepartment" />
          </template>
        </el-tree>
      </el-card>
      <!-- <button @click="isShowDialog=true">弹窗</button> -->
      <Add :is-show-dialog.sync="isShowDialog" :nodedata="nodedata" @add="getDepartments" />
    </div>
  </div>
</template>

<script>
import Add from './component/add.vue'
import treetools from './component/treetools.vue'
import { getDepartments } from '@/api/departments'
import { ListToTreeData } from '@/utils/index'
export default {
  components: { treetools, Add },
  data() {
    return {
      company: {
        lable: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      isShowDialog: false,
      depts: [
        // {
        //   lable: '总裁办',
        //   manager: '梁坤'
        // }, {
        //   lable: '财务部',
        //   manager: '培根',
        //   children: [
        //     {
        //       lable: '税务',
        //       manager: '梁坤'
        //     },
        //     {
        //       lable: '会计',
        //       manager: '梁坤'
        //     },
        //     {
        //       lable: '出纳',
        //       manager: '梁坤'
        //     }
        //   ]
        // },
        // {
        //   lable: '人事部',
        //   manager: '老王'
        // }, {
        //   lable: '技术部',
        //   manager: '装精波',
        //   children: [
        //     {
        //       lable: '前端',
        //       manager: '梁坤'
        //     },
        //     {
        //       lable: '后端',
        //       manager: '梁坤',
        //       children: [
        //         {
        //           lable: 'java',
        //           manager: '梁坤'
        //         },
        //         {
        //           lable: 'python',
        //           manager: '梁坤'
        //         },
        //         {
        //           lable: 'php',
        //           manager: '梁坤'
        //         },
        //         {
        //           lable: 'c++',
        //           manager: '梁坤'
        //         }
        //       ]
        //     },
        //     {
        //       lable: 'UI设计',
        //       manager: '梁坤'
        //     },
        //     {
        //       lable: '测试',
        //       manager: '梁坤'
        //     }
        //   ]
        // }
      ],
      nodedata: {}
    }
  },
  async created() {
    // const res = await getdepartments()
    // console.log(104, res)
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const { depts } = await getDepartments()
      this.depts = ListToTreeData(depts, '')
    },
    // this.treeData = depts
    addDepartment(nodedata) {
      this.isShowDialog = true
      this.nodedata = nodedata
    },
    async editDepartment(nodedata) {
      await this.$refs.addDpet.getDepartmentDetail(nodedata.id)
      this.nodedata = nodedata
      this.isShowDialog = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
